import React, { startTransition, useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar, List, Toast, Button } from 'antd-mobile';
import "../css/setting.css"
import Uploadavatar from './uploadavatar';

export default function Setting() {
  const navigate = useNavigate()
  const location = useLocation()
  const [user, setUser] = useState({})

  const back = () => {
    startTransition(() => {
      navigate('/bttm/my')
    })
  }
  useEffect(() => {
    setUser(JSON.parse(sessionStorage.getItem('users')))
  }, [])
  return (
    <div style={{ background: '#ebe9e5', minHeight: '100vh' }}>
      <div className='cxb_setting_navbar'>
        <NavBar onBack={back}>设置</NavBar>
      </div>
      <div className='cxb_setting_zhang'>
        <div className='cxb_setting_top_userimg'>
        <Uploadavatar user={user} />
          <div className='cxb_setting_top_username'>
            <h1>{user.username}</h1>
            <p>{user.phone}</p>
          </div>
          {/* <button className='cxb_setting_top_btn' onClick={()=>{
            startTransition(() => {
              navigate('/edituser', {state:{user}})
            })
          }}>编辑</button> */}
        </div>
      </div>
      <div style={{ marginBottom: '2rem' }}>
        <List.Item onClick={() => { 
          startTransition(() => {
            navigate('/editphone', {state:{user}})
          })
         }}>
          手机号修改
        </List.Item>
      </div>
      <div style={{ marginBottom: '2rem' }}>
        <List.Item onClick={() => { }}>
          音效与通知
        </List.Item>
        <List.Item onClick={() => { }}>
          通用
        </List.Item>
        <List.Item onClick={() => { }}>
          隐私条款
        </List.Item>
      </div>
      <div style={{ marginBottom: '2rem' }}>
        <List.Item onClick={() => { }}>
          问题反馈
        </List.Item>
        <List.Item onClick={() => { 
          startTransition(() => {
            navigate('/about', {state:{user}})
          })
         }}>
          关于
        </List.Item>
        <List.Item onClick={() => {
          Toast.show({
            content: '当前版本为1.0.0',
          })
        }}>
          检查更新
        </List.Item>
      </div>
      <Button onClick={() => {
        startTransition(()=>{
          navigate('/')
        })
        sessionStorage.clear();
      }} block color='danger' style={{ position: 'fixed', bottom: '0', borderRadius: '2rem' }}>退出登录</Button>
    </div>
  )
}
